<template>
  <div class="MessageManagement-GroupNoticecenter height100">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{
          $t("views.Message.GroupNoticecenter.50zff6yjhjo0")
        }}</span>
      </div>
      <div class="cr-head-right fs14">
        <el-button type="primary" size="mini" @click="linkToAdd()">{{
          $t("views.Message.GroupNoticecenter.50zff6yjk440")
        }}</el-button>
      </div>
    </div>
    <div class="content-box bg-white flex1">
      <div class="flex-wrap pt12 pl12 pr12">
        <div class="flex-al mb12">
          <!-- <span class="mr10 fs14 color-666">{{$t('views.Message.GroupNoticecenter.50zff6yjkls0')}}</span> -->
          <div class="select-box" style="width: 170px">
            <el-select
              v-model="filter.GradeValue"
              clearable
              :placeholder="$t('views.Message.GroupNoticecenter.50zff6yjl2g0')"
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in filter.GradeList"
                :key="item.noticetype_id"
                :label="item.noticetype_name"
                :value="item.noticetype_id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="lines ml16 mr16 mb12"></div>
        <div class="flex-al mb12">
          <span class="mr10 fs14 color-666">{{
            $t("views.Message.GroupNoticecenter.50zff6yjlkg0")
          }}</span>
          <div class="select-box" style="width: 270px">
            <el-date-picker
              v-model="GradeTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              :range-separator="
                $t('views.Message.GroupNoticecenter.50zff6yjm2w0')
              "
              :start-placeholder="
                $t('views.Message.GroupNoticecenter.50zff6yjmmg0')
              "
              :end-placeholder="
                $t('views.Message.GroupNoticecenter.50zff6yjn7k0')
              "
              @change="submission"
            ></el-date-picker>
          </div>
        </div>
        <div class="lines ml16 mr16 mb12"></div>
        <div class="flex-al Inquire-box mb12">
          <div class="ipt-box" style="width: 220px">
            <el-input
              v-model="filter.keyword"
              clearable
              :placeholder="$t('views.Message.GroupNoticecenter.50zff6yjnmk0')"
              @clear="keySearch"
              @keyup.native.enter="keySearch"
            ></el-input>
          </div>
          <el-button
            type="primary"
            size="small"
            class="search-btn fs14"
            @click="keySearch"
            >{{ $t("views.Message.GroupNoticecenter.50zff6yjo0g0") }}</el-button
          >
        </div>
      </div>
      <div class="tableDiv" ref="auto_height_table">
        <!-- <Table
          ref="auto_height_table"
          @switchChange="switchChange"
          @handleColumnChange="handleColumnChange"
          :list="notice.tableList.data"
          :options="notice.tableList.options"
          :columns="notice.tableList.columns"
          :operates="notice.tableList.operates"
        ></Table>-->
        <switchTableCont
          :tableData="tableList"
          @handleColumnChange="handleColumnChange"
          @handSetting="handSetting"
        >
          <!-- 按钮操作组********start -->
          <el-table-column
            ref="fixedColumn"
            :label="$t('views.Message.GroupNoticecenter.50zff6yjog80')"
            align="center"
            width="130px"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- 下拉菜单 -->
              <el-dropdown
                class="user-name"
                trigger="click"
                @command="handleCommand"
                @visible-change="handClickDrop(scope.row)"
              >
                <!-- <div class="user-show">
                  <i class="mh-select"></i>
                </div>-->
                <el-button type="text" class="el-dropdown-link">
                  {{ $t("views.Message.GroupNoticecenter.50zff6yjoyw0") }}
                  <i class="mh-select"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item divided command="see">{{
                    $t("views.Message.GroupNoticecenter.50zff6yjpbk0")
                  }}</el-dropdown-item>
                  <el-dropdown-item divided command="edit">{{
                    $t("views.Message.GroupNoticecenter.50zff6yjpzw0")
                  }}</el-dropdown-item>
                  <el-dropdown-item
                    divided
                    command="topping"
                    v-if="MessageDetail.notice_top != '1'"
                    >{{
                      $t("views.Message.GroupNoticecenter.50zff6yjqb80")
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    divided
                    command="topping"
                    v-if="MessageDetail.notice_top == '1'"
                    >{{
                      $t("views.Message.GroupNoticecenter.50zff6yjqm00")
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    divided
                    command="recall"
                    v-if="MessageDetail.notice_status != '-1'"
                    >{{
                      $t("views.Message.GroupNoticecenter.50zff6yjqx00")
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item divided command="delete">{{
                    $t("views.Message.GroupNoticecenter.50zff6yjr7s0")
                  }}</el-dropdown-item>
                  <el-dropdown-item
                    divided
                    command="resend"
                    v-if="MessageDetail.notice_status == '-1'"
                    >{{
                      $t("views.Message.GroupNoticecenter.50zff6yjri80")
                    }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button type="text" size="mini" @click.native.prevent="handEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="mini" @click.native.prevent="handDel(scope.row)">{{$t('views.Message.GroupNoticecenter.50zff6yjr7s0')}}</el-button>
              <el-button type="text" size="mini" @click.native.prevent="handRecall(scope.row)">{{$t('views.Message.GroupNoticecenter.50zff6yjqx00')}}</el-button>-->
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </switchTableCont>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px"
          :current-page="paging.currentPage"
          :page-sizes="paging.sizeArray"
          :page-size="paging.pageSize"
          :total="paging.total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
        <!-- @size-change="handleSizeChange"
        @current-change="handleCurrentChange"-->
      </div>
    </div>
    <!-- 查看通知详情 -->
    <el-drawer
      :title="$t('views.Message.GroupNoticecenter.50zff6yjrv00')"
      :visible.sync="messageDetailVisible"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box messageDetail-box"
      :before-close="handleClose"
    >
      <div class="slider-content pAll20">
        <p class="info-title fs16 color-333 tc mb5">
          {{ oneMessageInfo.notice_title }}
        </p>
        <div class="info-small-title fs12 tc color-aaa">
          <span class="mr10">{{
            oneMessageInfo.staffer_cnname
              ? oneMessageInfo.staffer_cnname
              : $t("views.Message.GroupNoticecenter.50zff6yjs8g0")
          }}</span>
          <span
            v-if="
              oneMessageInfo.staffer_cnname !=
              $t('views.Message.GroupNoticecenter.50zff6yjshw0')
            "
            class="mr10"
            >{{ $t("views.Message.GroupNoticecenter.50zff6yjssw0") }}
            {{
              oneMessageInfo.organize_cnname
                ? oneMessageInfo.organize_cnname
                : $t("views.Message.GroupNoticecenter.add1")
            }}</span
          >
          <span>{{
            oneMessageInfo.notice_createtime
              ? oneMessageInfo.notice_createtime
              : $t("views.Message.GroupNoticecenter.50zff6yjt1o0")
          }}</span>
        </div>
        <div
          class="info-content mt20"
          v-html="MessageDetail.notice_connet"
        ></div>
        <a
          target="_blank"
          download
          class="download_files"
          :href="item.url"
          v-show="MessageDetail.notice_filelist"
          v-for="(item, index) in MessageDetail.notice_filelist"
          :key="index"
        >
          {{ item.name }}
          <br />
        </a>
      </div>
    </el-drawer>
    <!-- 查看阅读人数 -->
    <el-drawer
      :title="$t('views.Message.GroupNoticecenter.50zff6yjtao0')"
      :visible.sync="togglePeopleVis"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box togglePeople-box"
      :before-close="handleClose"
    >
      <div class="slider-content">
        <el-tabs v-model="showReadTab" @tab-click="ClickReadTab">
          <el-tab-pane :label="noreadpeople" name="second">
            <ul class="list_box">
              <li
                class="s_item"
                v-for="(item, index) in NoReadnoticePeolist"
                :key="index"
              >
                <div class="img">
                  <img
                    v-if="item.staffer_img != '' && item.staffer_img != null"
                    :src="item.staffer_img"
                  />
                  <img
                    v-else-if="
                      item.staffer_sex ==
                      $t('common.Header.header.5167sp4cvno0')
                    "
                    :src="photoImgWomen"
                  />
                  <img v-else :src="photoImgmen" />
                  <img
                    v-if="
                      item.staffer_sex ==
                      $t('common.Header.header.5167sp4cvno0')
                    "
                    :src="iconWommen"
                    class="position_img"
                  />
                  <img v-else :src="iconmen" class="position_img" />
                </div>
                <p>
                  {{ item.staffer_cnname }}
                  <em>({{ item.post_name }})</em>
                </p>
                <p>{{ item.school_cnname }}</p>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane :label="readedpeople" name="first">
            <ul class="list_box">
              <li
                class="s_item"
                v-for="(item, index) in noticePeolist"
                :key="index"
              >
                <div class="img">
                  <img
                    v-if="item.staffer_img != '' && item.staffer_img != null"
                    :src="item.staffer_img"
                  />
                  <img
                    v-else-if="
                      item.staffer_sex ==
                      $t('common.Header.header.5167sp4cvno0')
                    "
                    :src="photoImgWomen"
                  />
                  <img v-else :src="photoImgmen" />
                  <img
                    v-if="
                      item.staffer_sex ==
                      $t('common.Header.header.5167sp4cvno0')
                    "
                    :src="iconWommen"
                    class="position_img"
                  />
                  <img v-else :src="iconmen" class="position_img" />
                </div>
                <p>
                  {{ item.staffer_cnname }}
                  <em>({{ item.post_name }})</em>
                </p>
                <p>{{ item.school_cnname }}</p>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- 删除通知 -->
    <popTips
      :dialogVisable="delMessage"
      :popTipsCont="popTips_del"
      @handConfirm="handleDel"
      @handCancel="delMessage = false"
      @handleCloseTip="delMessage = false"
    ></popTips>
    <!-- 撤回通知 -->
    <popTips
      :dialogVisable="recallMessage"
      :popTipsCont="popTips_recall"
      @handConfirm="handleRecall"
      @handCancel="recallMessage = false"
      @handleCloseTip="recallMessage = false"
    ></popTips>
    <!-- 置顶通知 -->
    <template>
      <!-- 重新发送 -->
      <popTips
        :dialogVisable="resendMessage"
        :popTipsCont="popTips_resend"
        @handConfirm="handleResend"
        @handCancel="resendMessage = false"
        @handleCloseTip="resendMessage = false"
      ></popTips>
      <popTips
        :dialogVisable="topingMessage"
        :popTipsCont="popTips_top"
        @handConfirm="handleTop"
        @handCancel="topingMessage = false"
        @handleCloseTip="topingMessage = false"
      ></popTips>
      <!-- <popTips
        v-if="this.MessageDetail.notice_top = 1"
        :dialogVisable="topingMessage"
        :popTipsCont="popTips_top2"
        @handConfirm="handleTop"
        @handCancel="topingMessage=false"
        @handleCloseTip="topingMessage=false"
      ></popTips>-->
    </template>
    <!-- <popTips
      :dialogVisable="topingMessage"
      :popTipsCont="popTips_top"
      @handConfirm="handleTop"
      @handCancel="topingMessage=false"
      @handleCloseTip="topingMessage=false"
    ></popTips>-->
    <!-- 查看适配职务数或校园数 -->
    <div class="small-dialog" v-if="showSuitSchool">
      <el-dialog
        :title="popBoxTitle"
        :visible.sync="showSuitSchool"
        width="500px"
        :before-close="handleClose"
      >
        <div class="dialog-content">
          <noBorderTableCont :tableData="suitSchoolTable"></noBorderTableCont>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="showSuitSchool = false"
            >{{ $t("views.Message.GroupNoticecenter.50zff6yjtjg0") }}
            {{ $t("views.Message.GroupNoticecenter.50zff6yjtzs0") }}</el-button
          >
          <el-button size="mini" @click="showSuitSchool = false"
            >{{ $t("views.Message.GroupNoticecenter.50zff6yjua00") }}
            {{ $t("views.Message.GroupNoticecenter.50zff6yjuj40") }}</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import switchTableCont from "../../components/tables/switchTableCont.vue";
import noBorderTableCont from "../../components/tables/noBorderTableCont.vue";
import popTips from "@/components/common/popTips/popTips.vue";
import noticeHttp from "./notice";
import httpApi from "../../utils/http";
// import { stringify } from "querystring";

export default {
  name: "PersonManage-staffManage",
  components: {
    switchTableCont,
    noBorderTableCont,
    popTips,
  },
  data() {
    // var phone = (rule, value, callback) => {
    //   if (!value) {
    //     callback(new Error(this.$t('views.Message.GroupNoticecenter.50zff6yjutk0')));
    //   } else if (!this.$Tool.isPhone(value)) {
    //     callback(new Error(this.$t('views.Message.GroupNoticecenter.50zff6yjv2c0')));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      readed: "",
      Noreaded: "",
      // noreadpeople:this.NoReadnoticePeolist?'未读人数('+this.NoReadnoticePeolist.length+'人)':'未读人数(n人)',
      seeInfo: {},
      delMessage: false, //删除通知
      //删除通知****弹窗
      popTips_del: {
        btn_text1: this.$t("views.Message.GroupNoticecenter.50zff6yjvao0"),
        btn_text2: this.$t("views.Message.GroupNoticecenter.50zff6yjvj80"),
        title: this.$t("views.Message.GroupNoticecenter.50zff6yjvro0"),
        context: this.$t("views.Message.GroupNoticecenter.50zff6yjw080"),
      },
      popTips_resend: {
        btn_text1: this.$t("views.Message.GroupNoticecenter.50zff6yjvao0"),
        btn_text2: this.$t("views.Message.GroupNoticecenter.50zff6yjvj80"),
        title: this.$t("views.Message.GroupNoticecenter.50zff6yjri80"),
        context: this.$t("views.Message.GroupNoticecenter.50zff6yjw9c0"),
      },
      recallMessage: false, //撤回通知
      popTips_recall: {
        btn_text1: this.$t("views.Message.GroupNoticecenter.50zff6yjvao0"),
        btn_text2: this.$t("views.Message.GroupNoticecenter.50zff6yjvj80"),
        title: this.$t("views.Message.GroupNoticecenter.50zff6yjwi80"),
        context: this.$t("views.Message.GroupNoticecenter.50zff6yjwrc0"),
      },
      topingMessage: false, //置顶通知
      resendMessage: false,
      popTips_top: {
        btn_text1: this.$t("views.Message.GroupNoticecenter.50zff6yjvao0"),
        btn_text2: this.$t("views.Message.GroupNoticecenter.50zff6yjvj80"),
        title: this.$t("views.Message.GroupNoticecenter.50zff6yjwzw0"),
        context: this.$t("views.Message.GroupNoticecenter.50zff6yjx8c0"),
      },
      popTips_top2: {
        btn_text1: this.$t("views.Message.GroupNoticecenter.50zff6yjvao0"),
        btn_text2: this.$t("views.Message.GroupNoticecenter.50zff6yjvj80"),
        title: this.$t("views.Message.GroupNoticecenter.50zff6yjwzw0"),
        context: this.$t("views.Message.GroupNoticecenter.50zff6yjxi80"),
      },
      messageDetailVisible: false, //查看通知详情
      togglePeopleVis: false, //查看阅读人数
      showReadTab: "second", //查看阅读人数****切换
      showSuitSchool: false, //适配职务数或校园数
      userpic: require("../../assets/images/default-staff-men.png"), //用户默认头像
      oneMessageInfo: {}, //存储单条通知信息
      MessageDetail: {}, //存储单条通知信息详情（以发送请求）
      GradeTime: [],
      //筛选
      filter: {
        GradeValue: "", //选择职等
        GradeTime: [],
        // start_time: this.GradeValue[0] || '',
        // end_time:this.GradeValue[1] || '',
        GradeList: [
          {
            value: this.$t("views.Message.GroupNoticecenter.50zff6yjxuo0"),
            label: this.$t("views.Message.GroupNoticecenter.50zff6yjy540"),
          },
          {
            value: this.$t("views.Message.GroupNoticecenter.50zff6yjye40"),
            label: this.$t("views.Message.GroupNoticecenter.50zff6yjyq00"),
          },
        ], //选择职等-下拉数据
        keyword: "", //关键词
      },
      // 表格数据
      tableList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: true, //是否可以编辑列
          tableHeight: 0, //表格高度
          moduleName: "Message", //当前页面所属于模块的名称****一个模块是唯一的
          ColumnName: "GroupNotice", //当前页面的名称，通常与路由名称一致
        },
      },
      notice: {
        noticetype_id: "",
        noticeList: [],
        keyword: "",
        starttime: "",
        endtime: "",
        tableList: {
          list: [],
          columns: [],
          options: {
            tableHeight: 0, //表格高度
            errortip: "", //空页面提示内容
            mutiSelect: false, //是否显示多选
            highlightCurrentRow: false,
          },
          operates: {
            label: this.$t("views.Message.GroupNoticecenter.50zff6yjog80"),
            align: "center",
            list: [
              {
                id: "1",
                label: this.$t("views.Message.GroupNoticecenter.50zff6yjpzw0"),
                type: "text",
                show: true,
                plain: false,
                disabled: false,
                method: (scope) => {
                  console.log(scope);
                  // this.linkToView()
                  // this.editVisible = true
                  this.$router.push({
                    path: `/NoticeEdit?id=${scope.row.notice_id}&type=group&noticetype_class=0`,
                  });
                },
              },
              {
                id: "4",
                label: this.$t("views.Message.GroupNoticecenter.50zff6yjr7s0"),
                type: "text",
                show: true,
                plain: false,
                disabled: false,
                method: (scope) => {
                  console.log(scope);
                  this.delNoticeVisible = true;
                  // this.topNoticeAction(scope.row.notice_id)
                  this.curDelNoticeId = scope.row.notice_id;
                },
              },
              {
                id: "2",
                label: this.$t("views.Message.GroupNoticecenter.50zff6yjqx00"),
                type: "text",
                show: true,
                plain: false,
                disabled: false,
                method: (scope) => {
                  console.log(scope);
                  // this.handleDel(scope);
                  this.delNoticeAction(scope.row.notice_id);
                },
              },
              // {
              //   id: "3",
              //   label: "置顶",
              //   type: "text",
              //   show: true,
              //   plain: false,
              //   disabled: false,
              //   method: scope => {
              //     console.log(scope)
              //     this.topNoticeAction(scope.row.notice_id)
              //     // this.handleDel(scope);
              //   }
              // }
            ],
          },
        },
      },

      paging: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
        sizeArray: [10, 20, 30, 40],
      },
      // 分页
      // curPage: 1,
      // pageSize: 10,
      // pageTotal: 0,

      noticePeolist: [], // 阅读人数详情----已读人数
      NoReadnoticePeolist: [], // 阅读人数详情----未读人数
      // starttime: this.GradeTime ? this.GradeTime[0] : "开始时间", //开始时间,
      // endtime: this.GradeTime ? this.GradeTime[1] : "结束时间",
      // 适配职务数或校园数标题
      popBoxTitle: "",
      // 适配职务数或校表格
      suitSchoolTable: {
        // 表格的列
        columns: [
          {
            fieldstring: "a1",
            fieldname: this.$t("views.Message.GroupNoticecenter.50zff6yjz100"),
            show: "1",
            // ismethod:true,//是否有事件
          },
          {
            fieldstring: "a2",
            fieldname: this.$t("views.Message.GroupNoticecenter.50zff6yjz9k0"),
            show: "1",
          },
          {
            fieldstring: "a3",
            fieldname: this.$t("views.Message.GroupNoticecenter.50zff6yjzi00"),
            show: "1",
          },
        ],
        // 表格数据
        list: [
          {
            a1: "12323",
            a2: this.$t("views.Message.GroupNoticecenter.50zff6yjzqk0"),
            a3: "01428W",
          },
          {
            a1: "12323",
            a2: this.$t("views.Message.GroupNoticecenter.50zff6yjzqk0"),
            a3: "01428W",
          },
          {
            a1: "12323",
            a2: this.$t("views.Message.GroupNoticecenter.50zff6yjzqk0"),
            a3: "01428W",
          },
        ],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: "240px", //表格高度
        },
      },
      iconWommen: require("../../assets/images/icon/icon-person-women.png"),
      iconmen: require("../../assets/images/icon/icon-person-men.png"),
      photoImgWomen: require("../../assets/images/default-staff-women.png"), //默认女头像
      photoImgmen: require("../../assets/images/default-staff-men.png"), //默认男头像
    };
  },
  created() {
    this.slider = this.$store.state.Slider;

    this.messageList();
    this.getNoticeTypeList();
  },
  watch: {},
  computed: {
    noreadpeople() {
      return (
        this.$t("views.Message.GroupNoticecenter.50zff6yjzyo0") +
        this.readed +
        this.$t("views.Message.GroupNoticecenter.50zff6yk0780")
      );
    },
    readedpeople() {
      return (
        this.$t("views.Message.GroupNoticecenter.50zff6yk0fg0") +
        this.Noreaded +
        this.$t("views.Message.GroupNoticecenter.50zff6yk0780")
      );
    },
  },
  methods: {
    handleResend() {
      console.log(this.$t("views.Message.GroupNoticecenter.50zff6yk0nk0"));
      noticeHttp
        .modifyStatusAction({
          notice_id: this.MessageDetail.notice_id,
          notice_status: 1,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.resendMessage = false;
            this.messageList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 页码
    handleSizeChange(index) {
      this.paging.pageSize = index;
      this.messageList();
    },
    // 页码
    handleCurrentChange(index) {
      this.paging.currentPage = index;
      this.messageList();
    },
    handleSelectChange() {
      this.paging.currentPage = 1;
      this.messageList();
    },
    submission() {
      this.paging.currentPage = 1;
      this.messageList();
    },
    keySearch() {
      this.paging.currentPage = 1;
      this.messageList();
    },
    // 获取单条信息
    getNewsOneInfoApi() {
      console.log(this.oneMessageInfo);
      const id = this.oneMessageInfo.notice_id;
      // const id = (data.notice_id).toString()
      // const id = Number(data.notice_id)
      noticeHttp.getNewsOneInfoApi({ notice_id: id }).then((res) => {
        console.log(res);
        this.MessageDetail = res.data.result.list;
        console.log(
          this.MessageDetail,
          this.$t("views.Message.GroupNoticecenter.50zff6yk1400")
        );
      });
    },
    // handleSee(){
    //   this.getNewsOneInfoApi()
    // },
    // // 查看
    // handleSee(data) {
    //   console.log("okkk", data);
    //   console.log(data.notice_id, typeof data.notice_id);
    //   // const id = (data.notice_id).toString()
    //   // const id = Number(data.notice_id)
    //   noticeHttp.getNewsOneInfoApi({ notice_id: data.notice_id }).then(res => {
    //     console.log(res);
    //     this.seeInfo = res.data.result.list;
    //     console.log(this.seeInfo, "这是单个消息的信息！！！！！！！！！！！！");
    //   });
    // },
    // 获取消息信息列表
    getNoticeTypeList() {
      httpApi
        .getNoticeTypeList({
          noticetype_class: 0,
        })
        .then((res) => {
          this.filter.GradeList = res.data.result.list;
        });
    },
    // 获取消息列表
    messageList() {
      console.log("starttime111111111", this.starttime);
      console.log("endtime1111111111", this.endtime);
      noticeHttp
        .messageList({
          keyword: this.filter.keyword, //关键词 标题 发布人
          noticetype_id: this.filter.GradeValue, //	通知类型ID
          starttime: this.GradeTime ? this.GradeTime[0] : "", //开始时间
          endtime: this.GradeTime ? this.GradeTime[1] : "", //	结束时间
          p: this.paging.currentPage, //	第几页
          num: this.paging.pageSize, //	每页几条
          is_count: "1", //是否需要总数 1-需要
          notice_class: 0, //消息类别 0-集团消息 1-校园消息
        })
        .then((res) => {
          console.log(res, "1```````````````````````````");
          const { field, list, allnum } = res.data.result;
          this.notice.tableList.columns = field;
          let obj = this.$Tool.getStorage(
            "module" + [this.tableList.options.moduleName]
          );
          if (obj) {
            if (obj["show_" + [this.tableList.options.ColumnName]]) {
              this.tableList.columns =
                obj["show_" + [this.tableList.options.ColumnName]];
            } else {
              this.tableList.columns = field;
            }
          } else {
            this.tableList.columns = field;
          }
          this.paging.total = Number(allnum);
          if (res.data.error == "0") {
            this.tableList.data = list;
            this.tableList.list = list;
          } else {
            this.notice.tableList.data = [];
            this.tableList.list = list;
            this.tableList.options.errortip = res.data.errortip;
          }
        });
    },
    //新增发布通知
    linkToAdd() {
      this.$router.push({ path: "/Message/GroupNotice/Add" });
    },
    // 确认删除
    handleDel() {
      console.log(this.$t("views.Message.GroupNoticecenter.50zff6yk1gw0"));
      noticeHttp
        .modifyStatusAction({
          notice_id: this.MessageDetail.notice_id,
          notice_status: -2,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.delMessage = false;
            this.messageList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 置顶
    handleTop() {
      console.log(this.$t("views.Message.GroupNoticecenter.50zff6yk1xw0"));
      noticeHttp
        .modifyTopStatusAction({
          notice_id: this.MessageDetail.notice_id,
          notice_top: this.MessageDetail.notice_top,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.topingMessage = false;
            this.messageList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 撤回
    handleRecall() {
      console.log(this.$t("views.Message.GroupNoticecenter.50zff6yk26g0"));
      noticeHttp
        .modifyStatusAction({
          notice_id: this.MessageDetail.notice_id,
          notice_status: -1,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.recallMessage = false;
            this.messageList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 获取个人消息列表
    getNotificationApi() {
      console.log(this.$t("views.Message.GroupNoticecenter.50zff6yk2ec0"));
      noticeHttp
        .getNotificationApi({
          // school_id: ""
        })
        .then((res) => {
          console.log(
            res,
            this.$t("views.Message.GroupNoticecenter.50zff6yk2lw0")
          );
          // if (res.data.error == 0) {
          //   this.$message({ message: "撤回成功", type: "success" });
          //   this.recallMessage = false;
          //   this.messageList();
          // } else {
          //   this.$message.error(res.data.errortip);
          // }
        });
    },
    // 修改阅读状态
    modifyNoticeReadAction(id) {
      console.log(this.$t("views.Message.GroupNoticecenter.50zff6yk2ec0"));
      noticeHttp
        .modifyNoticeReadAction({
          // school_id:''
          notice_id: id,
        })
        .then((res) => {
          console.log(
            res,
            this.$t("views.Message.GroupNoticecenter.50zff6yk2u40")
          );
          // if (res.data.error == 0) {
          //   this.$message({ message: "撤回成功", type: "success" });
          //   this.recallMessage = false;
          //   this.messageList();
          // } else {
          //   this.$message.error(res.data.errortip);
          // }
        });
    },
    // 查看阅读详情
    getReadInfoApi(id) {
      noticeHttp
        .getReadInfoApi({
          // school_id:''
          notice_id: id,
          p: this.paging.currentPage, //	第几页
          num: 60, //	每页几条
        })
        .then((res) => {
          console.log(
            res,
            this.$t("views.Message.GroupNoticecenter.50zff6yk2u40")
          );
          // if (res.data.error == 0) {
          //   this.$message({ message: "撤回成功", type: "success" });
          //   this.recallMessage = false;
          //   this.messageList();
          // } else {
          //   this.$message.error(res.data.errortip);
          // }
          this.noticePeolist = res.data.result.list.hasStafferList;
          this.NoReadnoticePeolist = res.data.result.list.noStafferList;
          this.readed = String(res.data.result.list.noNums);
          this.Noreaded = String(res.data.result.list.hasNums);
          console.log(this.readed, this.Noreaded);
        });
    },
    // 功能菜单点击
    handClickDrop(row) {
      console.log(row, this.$t("views.Message.GroupNoticecenter.50zff6yk32o0"));
      this.oneMessageInfo = row;
      this.getNewsOneInfoApi();
    },

    // 功能菜单下拉
    handleCommand(command) {
      console.log(
        command,
        this.$t("views.Message.GroupNoticecenter.50zff6yk3as0")
      );
      if (command == "see") {
        // 查看
        this.messageDetailVisible = true;
        this.getNotificationApi();
        // this.getNewsOneInfoApi();
      } else if (command == "edit") {
        // 编辑
        // let id = "1"; //测试
        console.log(
          this.MessageDetail,
          this.$t("views.Message.GroupNoticecenter.50zff6yk3j00")
        );
        const id = this.MessageDetail.notice_id;
        this.$router.push({
          // path: `/NoticeEdit?id=${id}&type=group`
          //  path: `/NoticeEdit?id=${scope.row.notice_id}&type=group`
          path: `/Message/NoticeEdit?id=${id}&type=group&noticetype_class=0`,
        });
      } else if (command == "topping") {
        // 置顶
        if (this.MessageDetail.notice_top == "1") {
          this.popTips_top.context = this.$t(
            "views.Message.GroupNoticecenter.50zff6yk3qw0"
          );
          this.popTips_top.title = this.$t(
            "views.Message.GroupNoticecenter.50zff6yk3yw0"
          );
        } else {
          this.popTips_top.context = this.$t(
            "views.Message.GroupNoticecenter.50zff6yk49c0"
          );
          this.popTips_top.title = this.$t(
            "views.Message.GroupNoticecenter.50zff6yjwzw0"
          );
        }
        this.topingMessage = !this.topingMessage;
      } else if (command == "recall") {
        // 撤回
        this.recallMessage = !this.recallMessage;
      } else if (command == "delete") {
        // 删除
        this.delMessage = !this.delMessage; //删除通知
      } else if ((command = "resend")) {
        console.log("resend");
        this.resendMessage = !this.resendMessage;
        // this.publish()
      }
    },

    // 点击表格中的内容
    handleColumnChange(v1, v2, v3) {
      console.log(v1, v2, v3);
      const id = v3.notice_id;
      // if (v2.isTitle) {
      //   //查看通知详情
      //   this.messageDetailVisible = true;
      // } else if (v2.isReadNum) {
      //   //查看阅读人数
      //   this.togglePeopleVis = true;
      // } else if (v2.isPostNum) {
      //   //适配职务数或校园数*************职务数
      //   this.popBoxTitle = "通知职务范围";
      //   this.showSuitSchool = true;
      // }
      console.log(v2.fieldname);
      this.togglePeopleVis = true;
      this.getReadInfoApi(id);
    },
    // 编辑列编辑提交
    handSetting(v) {
      console.log(v, 121313);
      this.messageList();
    },
    // 页码变化
    curPageChange(v) {
      this.curPage = v;
    },
    // pageSize改变
    pageSizeChange() {
      this.curPage = 1;
    },
    // 重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
    },

    // 侧边栏-----查看阅读人数***切换
    ClickReadTab(e) {
      this.showReadTab = e.name;
    },
    // 关闭弹框
    handleClose(done) {
      done();
    },
  },
  mounted() {
    console.log(this.$children, "$children$children");
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 52
        );
      }
    });
    console.log(this.notice.tableList, "``````````````````");
  },
};
</script>

<style lang="less">
.MessageManagement-GroupNoticecenter {
  .mh-select {
    font-size: 12px;
    transform: scale(0.4);
    display: inline-block;
  }
  .mh-select::before {
    color: #909399;
  }
}
// 侧边栏样式
.togglePeople-box,
.messageDetail-box {
  .slider-content {
    // padding: 10px 20px 20px 20px;
    .el-tree-node__content:hover {
      color: #f78f0e;
    }

    .el-tabs__nav-scroll {
      padding-left: 20px;
      background: rgba(240, 244, 249, 1);
    }

    .el-tabs__content {
      padding: 10px 20px 20px 20px;
    }

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .download_files {
      display: block;
      // display: inline-block;
      padding: 15px 0 0;
      font-size: 16px;
      color: #0ea8f7;
    }
    // 阅读人数详情列表样式
    .list_box {
      display: flex;
      flex-wrap: wrap;
      .s_item {
        width: 50%;
        display: flex;
        margin-bottom: 25px;
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
        .img {
          margin: 0 auto;
          position: relative;
          img {
            width: 50px;
            height: 50px;
            overflow: hidden;
            margin: 0 auto;
            border-radius: 50%;
          }
          .position_img {
            position: absolute;
            display: inline-block;
            top: -3px;
            right: -3px;
            width: 14px;
            height: 14px;
          }
        }
        p {
          padding-top: 6px;
          font-size: 14px;
          color: #333;
          width: 100%;
          em {
            color: #aaa;
            font-style: normal;
          }
        }
      }
    }
  }
}
</style>
